<template>
	<div>
		<div v-if="list.length>0">
				<view class="cont" v-for="item,index in data" :key='index'>
					<!-- 标题 -->
					<van-cell  is-link @click="tz(item._id ,item.campany)">
						<view slot="title">
						    <view style="color:#1677ff">{{item.campany}}</view>
						  </view>
					</van-cell>
					<view class="content"  @click="tz(item._id , item.campany)">
						<!-- 头像 -->
						<div class="imgs">
							<van-image
							  round
							  width="30px"
							  height="30px"
							  :src="item.author?.avatar ? item.author.avatar?.replace(/public/, baseURL):''" />
							<text style="margin-left: 5px;">{{item.author?.username}}</text>
						</div>
						<!-- 地址 -->
						<view class="dizhi">
							面试地址: {{item.address}}
						</view>
						<!-- 时间 -->
						<view class="times">
							 面试时间: <span :class="re.isTime?'colorOne':'colorTwo'">{{dates(item.date??item.time)}}</span>
						</view>
						<!-- 难度 -->
						<view class="levels">
							 面试难度: <span>{{ LevelTypes[0][item.level[0] - 1]?.label}}</span>
						</view>
						<view class="hots">
							 当前热度: <span :class="re.isHot?'colorOne':'colorTwo'">{{item.hot}}</span>
						</view>
						<!-- 标签 -->
						<view class="tages">
							<van-tag type="primary" :key="it.label" v-for="it,index in item.tags" style="margin-right:3px">{{it.label}}</van-tag>
						</view>
						<!-- 图片 -->
						<view class="cont-imgs">
							<audio disabled controls name="面试录音" :author="item.author?.username" class='mt10' style="maxWidth: 280px" :src="item.audioSrc?.replace(/public/, baseURL)" v-if="item.audioSrc"></audio>
							<van-image v-else height="300" width="100%" :src="item.imgs[0]?.imgSrc?.replace(/public/, baseURL)" />
						</view>
						<!-- 操作 -->
						<view class="caozuo">
							<view class="">
								<van-icon name="good-job-o" />
								{{item.likes}}
							</view>
							<view class="">
								<van-icon name="like-o" />
								{{item.collects}}
							</view>
							<view class="">
								<van-icon name="comment-o" />
								{{item.pings}}
							</view>
						</view>
					</view>
				</view>
		</div>
		<!-- 如果没有数据 -->
		<div class="empty" style="marginTop:60px" v-else>
			<van-empty description="暂无数据" />
		</div>
		
	</div>
</template>

<script setup lang='ts'>
import {dates} from '@/ulit/date'
import {baseURL} from '@/ulit/baseURL'
import { toRef,defineProps,ref,watch} from "vue";
const LevelTypes = [
		[{
				label: '简单',
				value: 1
			},
			{
				label: '复杂',
				value: 2
			},
			{
				label: '困难',
				value: 3
			},
			{
				label: '地狱',
				value: 4
			},
			{
				label: '无解',
				value: 5
			},
		]
	]
const re = defineProps(["list", "isHot", "isTime"])
const list = toRef(re,'list')
const data = ref<addmsType[]>([])
const tz = (a:string,b:string)=>{
	wx.navigateTo({
		url:`/pages/datail/datail?id=${a}&canpany=${b}`
	})
}

watch(list,(n)=>{
	console.log(re.isHot);
	data.value = n as addmsType[];
	if(re.isHot){	
		data.value.sort((a,b)=>b.hot-a.hot)
		let arr = [...data.value]
		data.value=arr

	}
	if(re.isTime){
		data.value.sort((a,b)=>(new Date(b.date??b.time).getTime()) - (new Date(a.date??a.time).getTime()))
		let arr = [...data.value]
		console.log(arr);
		data.value=arr
	}
})
</script>

<style scoped lang="scss">
.cont{
	border-radius:16px;
	border:1px soild gray;
	margin: 0 10px;
	box-sizing: border-box;
	color:#999999;
	font-size: 14px;
	height: auto;
	margin-bottom: 10px;
	.content{
		padding: 0 10px;
		box-sizing: border-box;
		.imgs{
			display: flex;
			align-items: center;
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 5px;
		}
		.times{
			margin-top: 5px;
			margin-bottom: 5pxs;
		}
		.hots{
			margin-top: 5px;
		}
		.tages{
			margin-top: 5px;
		}
		.cont-imgs{
			margin-top: 5px;
		}
		.caozuo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
		}
	}
}
.colorOne{
	color: #FF5500;
}
.colorTwo{
	color: #1677ff;
}
</style>